<template>
  <div class="menu-box">
    <el-menu
      :collapse="GET_COLLAPSE.isCollapse"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"/>
          <span slot="title">基础资料</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            index="1-1"
            @click="clickTab(tabArr[0])">班次管理</el-menu-item>
          <el-menu-item
            index="1-2"
            @click="clickTab(tabArr[1])">班组管理</el-menu-item>
          <el-menu-item
            index="1-3"
            @click="clickTab(tabArr[2])">工厂管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"/>
          <span slot="title">物料管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            index="2-1"
            @click="clickTab(tabArr[0])">物料单位</el-menu-item>
          <el-menu-item
            index="2-2"
            @click="clickTab(tabArr[1])">物料类型</el-menu-item>
          <el-menu-item
            index="2-3"
            @click="clickTab(tabArr[1])">物料分组</el-menu-item>
          <el-menu-item
            index="2-4"
            @click="clickTab(tabArr[1])">物料信息</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">选项4</span>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"/>
          <span slot="title">设备管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            index="3-1"
            @click="clickTab(tabArr[0])">选项设置</el-menu-item>
          <el-menu-item
            index="3-2"
            @click="clickTab(tabArr[1])">设备类型</el-menu-item>
          <el-menu-item
            index="3-3"
            @click="clickTab(tabArr[1])">生产厂家</el-menu-item>
          <el-menu-item
            index="3-4"
            @click="clickTab(tabArr[1])">设备信息</el-menu-item>
          <el-menu-item
            index="3-5"
            @click="clickTab(tabArr[1])">配件类型</el-menu-item>
          <el-menu-item
            index="3-6"
            @click="clickTab(tabArr[1])">配件信息</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">选项4</span>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item
        index="4">
        <i class="el-icon-document"/>
        <span slot="title">工艺管理</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-setting"/>
        <span slot="title">计划管理</span>
      </el-menu-item>
      <el-menu-item index="6">
        <i class="el-icon-setting"/>
        <span slot="title">计划执行</span>
      </el-menu-item>
      <el-menu-item index="7">
        <i class="el-icon-setting"/>
        <span slot="title">质量管理</span>
      </el-menu-item>
      <el-menu-item index="8">
        <i class="el-icon-setting"/>
        <span slot="title">仓库管理</span>
      </el-menu-item>
      <el-menu-item index="9">
        <i class="el-icon-setting"/>
        <span slot="title">生产追溯</span>
      </el-menu-item>
      <el-submenu index="10">
        <template slot="title">
          <i class="el-icon-location"/>
          <span slot="title">系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            index="3-1"
            @click="clickTab(tabArr[0])">用户管理</el-menu-item>
          <el-menu-item
            index="3-2"
            @click="clickTab(tabArr[1])">角色管理</el-menu-item>
          <el-menu-item
            index="3-3"
            @click="clickTab(tabArr[1])">角色权限</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { ADD_TAG_ITEM } from '@/store/mutation-types'
export default Vue.extend({
  data () {
    return {
      tabArr: [
        {
          name: 'classManager',
          path: '/ts/classManager',
          isactive: true,
          title: '班次管理',
        },
        {
          name: 'Home',
          path: '/ts/list',
          isactive: true,
          title: '选项一',
        },
        {
          name: 'Tab2',
          path: '/ts/tab2',
          isactive: true,
          title: '选项二',
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['GET_COLLAPSE']),
  },
  methods: {
    handleOpen (key:any, keyPath:any) {
      console.log(key, keyPath)
    },
    handleClose (key:any, keyPath:any) {
      console.log(key, keyPath)
    },
    clickTab (obj:any) {
      this.$store.commit(ADD_TAG_ITEM, obj)
      this.$router.push({
        name: obj.name,
      })
    },
  },
})
</script>

<style scoped lang='scss'>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100%;
}

.menu-box {
  min-height: 100%;
  background-color: rgb(84, 92, 100)
}
</style>
